import React from "react";
import "./index.scss";
import { Tag, Ellipsis } from "antd-mobile";
import { CourseType } from "../../types/course";
import { Link } from "react-router-dom";
interface CouseListType extends CourseType {
  courseid?: string;
}
type Props = {
  list: Array<CouseListType>;
  isCollect: boolean;
};

export default function Course({ list, isCollect = false }: Props) {
  return (
    <div className="course-list">
      {list.map((item) => {
        return (
          <div className="course" key={item.objectId}>
            <div className="poster">
              <img src={item.poster} alt="" />
              <Tag className="tag" color="rgba(0,0,0,0.4)">
                {item.isvip ? "VIP尊享" : "免费"}
              </Tag>
            </div>
            <Link to={`/detail/${isCollect ? item.courseid : item.objectId}`}>
              <Ellipsis className="tit" direction="end" content={item.name} />
              <Ellipsis
                className="info"
                direction="end"
                rows={2}
                content={item.info}
              />
            </Link>
          </div>
        );
      })}
    </div>
  );
}
